<template>
  <view class="container">
    <!-- 地址信息 -->
    <view class="address" v-if="flag === 'order'">
      <view class="self" v-if="orderInfo.delivery === 'self'">
        <view class="text">上门自取</view>
        <view class="info">
          <text class="phone">12341234123</text>
          <text class="local">广东省 湛江市 麻章区 瑞康二横路37号</text>
          <text class="time">营业时间：全天</text>
        </view>
      </view>
      <view class="same" v-else>
        <view class="text">同城配送</view>
        <view class="info">
          <view class="user">
            <text class="name">{{ orderInfo.username }}</text>
            <text class="phone">{{ orderInfo.phone }}</text>
          </view>
          <view class="address">{{ orderInfo.address }}</view>
        </view>
      </view>
    </view>

    <!-- 商品信息 -->
    <view class="dessert-list">
      <view
        class="dessert"
        v-for="item in orderInfo.detail"
        :key="item.id">
        <up-image
          :src="`http://localhost:8080/api/files/${item.dessert.dessertImg}`"
          width="140rpx"
          height="140rpx"></up-image>
        <text class="name">{{ item.dessert.dessertName }}</text>
        <text class="specs">{{ item.dessert.specs }}</text>
        <text class="price">{{ item.total }}</text>
        <text class="num">{{ 'x' + item.num }}</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view
        class="name"
        v-if="(orderInfo.delivery === 'self') || (orderInfo.username !== '')">
        联系人
        <text>{{ orderInfo.userName || orderInfo.username }}</text>
      </view>
      <view
        class="phone"
        v-if="(orderInfo.delivery === 'self') || (orderInfo.phone !== '')">
        联系电话
        <text>{{ orderInfo.phone }}</text>
      </view>
      <view class="phone" v-if="flag === 'diyOrder'">
        预约时间
        <text>{{ orderInfo.time }}</text>
      </view>
      <view class="status">
        订单状态
        <text>{{ orderInfo.status }}</text>
      </view>
      <view class="money">
        总金额
        <text>{{ orderInfo.amount }}</text>
      </view>
      <view class="points">
        获得积分
        <text>{{ Math.floor(parseInt(orderInfo.amount) / 2) }}</text>
      </view>
      <view class="create-time">
        创建时间
        <text>{{ orderInfo.createTime }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const orderInfo = ref([])
const flag = ref('')
onLoad((option) => {
  if (option.order) {
    flag.value = 'order'
    orderInfo.value = JSON.parse(decodeURIComponent(option.order))
  } else {
    flag.value = 'diyOrder'
    orderInfo.value = JSON.parse(decodeURIComponent(option.diyOrder))
  }
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  .address {
    width: 95%;
    background-color: #fff;
    border-radius: 16rpx;
    margin: 0 auto 10rpx;
    .same {
      width: 100%;
      padding: 10rpx 10rpx;
      box-sizing: border-box;
      .text {
        font-size: 38rpx;
        font-weight: bold;
        color: #bb7755;
        margin-bottom: 10rpx;
      }
      .info {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        .user {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
          .name {
            font-size: 32rpx;
            font-weight: bold;
          }
          .phone {
            font-size: 32rpx;
            font-weight: bold;
            margin-left: 10rpx;
          }
        }

        .address {
          width: 100%;
          font-size: 30rpx;
          color: #666;
          margin: 0;
        }
      }
    }

    .self {
      width: 100%;
      padding: 10rpx 10rpx;
      box-sizing: border-box;
      .text {
        font-size: 38rpx;
        font-weight: bold;
        color: #bb7755;
        margin-bottom: 10rpx;
      }
      .info {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 32rpx;
        .phone {
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .local {
          color: #666;
          margin-bottom: 10rpx;
        }

        .time {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }

  .dessert-list {
    width: 95%;
    background-color: #fff;
    border-radius: 10rpx;
    margin: 0 auto;

    .dessert {
      width: 100%;
      position: relative;
      padding: 10rpx;
      margin-bottom: 10rpx;

      .name {
        font-size: 32rpx;
        position: absolute;
        top: 10rpx;
        left: 170rpx;
      }

      .specs {
        font-size: 28rpx;
        color: #9d9d9d;
        position: absolute;
        top: 100rpx;
        left: 170rpx;
      }

      .price {
        color: #f6823e;
        font-size: 30rpx;
        position: absolute;
        top: 10rpx;
        right: 50rpx;
      }

      .num {
        font-size: 28rpx;
        color: #666;
        position: absolute;
        bottom: 10rpx;
        right: 50rpx;
      }
    }
  }

  .order-info {
    width: 95%;
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 10rpx;
    margin: 0 auto;
    view {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      color: #222;
      font-weight: 600;
      margin-bottom: 20rpx;

      text {
        font-size: 28rpx;
        color: #9d9d9d;
        font-weight: normal;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>
